<template>
  <div class="dashboard-container">
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="item in list" :key="item">
        <img id="img" :src="item.cover" @click="getInfoById(item.id)">
      </el-carousel-item>

    </el-carousel>
    <el-form label-width="120px">
<!--        <div >-->
<!--          <el-input style="text-align: center" v-model="news.title"/>-->
<!--        </div>-->
        <el-row id="title" v-model="news.title">{{news.title}}</el-row>


        <div style="margin: 50px">
          <el-input v-model="news.context" :rows="10" type="textarea" v-html="news.context"/>
        </div>

      <el-row id="time" v-model="news.createDate">{{news.createDate}}</el-row>

    </el-form>


  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import echarts from 'echarts'
  import player from '@/api/dbwork/player'
  import news from '@/api/dbwork/news'
  export default {

    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    data(){
      return{
        charts:{},
        list:[],
        news:{}
      }
    },
    created() {
      this.getInfo()
    },
    methods:{
      getInfo(){
        news.getNewsTopSix()
          .then(response=>{
            this.list = response.data.list
            this.getInfoById(this.list[0].id)
          })
      },
      getInfoById(id){
        news.getNewsById(id)
        .then(response=>{
          this.news = response.data.news
        })
      }
    }
  }
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0px;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  #img {
    width: 100%;
    height: 100%;
    object-fit:cover;
  }
  #title{
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  #time{
    font-size: 12px;
    color: #9b9b9b;
    margin-left: 1100px;
    margin-bottom: 100px;
  }

</style>
